<template>
	<view class="details-article">
		<view class="title">{{ info.tatle }}</view>
		<view class="article-author">
			<view class="left-info">
				<image :src="info.photo" mode=""></image>
				<view class="author-info">
					<text>{{ info.userName }}</text>
					<text>{{ dayjs(info.time).format('YYYY-MM-DD') }}</text>
				</view>
			</view>
			<view class="right-info">
				<van-button @click="follow(info.lid)" type="info">{{
					info.gz == '关注' ? '＋' + info.gz : info.gz
				}}</van-button>
			</view>
		</view>
		<view class="ariticle-content">
			<view class="text">
				<rich-text :nodes="info.content"></rich-text>
			</view>
			<view class="operate">
				<van-button round icon="like">点赞</van-button>
				<van-button round icon="delete-o">不喜欢</van-button>
			</view>
			<view class="recomment"> 猜你喜欢 </view>
			<view class="comments">
				<view class="reply-list">
					<view v-for="(item, i) in info.pl" :key="i" class="item">
						<view class="title">
							<view class="left">
								<image :src="item.photo" mode=""></image>
								<text class="username">{{
									item.userName
								}}</text>
							</view>
							<view class="right">
								<van-icon name="like" /> <text>0</text>
							</view>
						</view>
						<view class="content">
							<view class="info">{{ item.content }}</view>
							<view class="tips">
								<text>{{ item.time }}</text>
								<text class="reply">回复0</text>
							</view>
						</view>
					</view>
				</view>
				<view class="finished-text">没有更多了</view>
			</view>
		</view>
		<view class="reply-operate">
			<view class="left">
				<input
					v-model="state.content"
					type="text"
					placeholder="写评论"
					@blur="comment"
				/>
			</view>
			<view class="right">
				<van-icon :info="info.pl.length" name="comment-o" />
				<!-- <van-icon name="star" /> -->
				<van-icon @click="collection(info.uid)" :class="{ active: info.sc }" :name="info.sc ? 'star' : 'star-o'" />
				<van-icon name="share-o" />
			</view>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { computed, reactive, toRefs } from 'vue'
import {
	articleDetailsApi,
	commentApi,
	followApi
} from '../../api/modules/article'
import { collectionApi } from '@/api/modules/user'
import dayjs from 'dayjs'
const state = reactive({ info: {
	pl: []
}, uid: '', id: 0, content: '' })
const init = async () => {
	const { data } = await articleDetailsApi({ uid: state.uid, id: state.id })
	state.info = data
	uni.setNavigationBarTitle({
			title: state.info.tatle
		})
}
const comment = async () => {
	await commentApi({ content: state.content, lid: state.uid })
	init()
	state.content = ''
}

const follow = async lid => {
	await followApi({ lid })
	init()
}

const collection = async (uid) => {
	await collectionApi({uid})
	init()
}
// 页面加载
onLoad(message => {
	state.id = message.id
	state.uid = message.uid
	init()
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})
const { info } = toRefs(state)
</script>

<style lang="scss">
.active {
	color: rgb(255, 197, 69);
}
.details-article {
	padding: 20rpx;
	box-sizing: border-box;
	.title {
		font-size: 60rpx;
		margin: 40rpx 0;
	}
	.article-author {
		position: sticky;
		z-index: 2;
		top: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		height: 140rpx;
		.left-info {
			display: flex;
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.author-info {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: baseline;
				color: #2c3e50;
			}
		}
	}
	.ariticle-content {
		color: #2c3e50;
		box-sizing: border-box;
		margin: 60rpx 0;
		text-align: left;
		white-space: normal;
		overflow: hidden;
		margin-bottom: 100rpx;
		.operate {
			margin-top: 48rpx;
			display: flex;
			justify-content: space-around;
			flex-direction: row;
		}
		.recomment {
			text-align: left;
			font-size: 32rpx;
			font-weight: 900;
			padding: 20rpx 0;
			margin: 20rpx 0;
			margin-bottom: 100rpx;
		}
		.comments {
			margin: 40rpx 0;
			margin-bottom: 200rpx;
			.reply-list {
				padding-bottom: 200rpx;
				.item {
					.title {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						.left {
							image {
								width: 80rpx;
								height: 80rpx;
								border-radius: 50%;
							}
							.username {
								margin-left: 10rpx;
								color: #708ab6;
								margin-top: 10rpx;
							}
						}
						.right {
							color: #2c3e50;
							.van-icon {
								color: rgb(84, 77, 79);
								font-size: 50rpx;
							}
							text {
								font-size: 28rpx;
								margin-left: 12rpx;
							}
						}
					}
					.content {
						.info {
							text-align: left;
							margin-left: 100rpx;
							font-size: 32rpx;
							font-weight: 500;
						}
						.tips {
							text-align: left;
							margin: 20rpx 0;
							margin-left: 100rpx;
							.reply {
								padding: 10rpx 36rpx;
								background-color: #eff7f8;
								border-radius: 80rpx;
								margin-left: 20rpx;
							}
						}
					}
				}
			}
			.finished-text {
				color: #969799;
				font-size: 13px;
				line-height: 50px;
				text-align: center;
			}
		}
	}
	.reply-operate {
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #fff;
		width: 100%;
		height: 100rpx;
		border-top: 2rpx solid #ccc;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: rgb(119, 119, 119);
		.left {
			width: 55%;
			input {
				border: none;
				line-height: 32px;
				height: 32px;
				width: 85%;
				border-radius: 40px;
				border: 1px solid #eee;
				padding: 0 24rpx;
			}
		}
		.right {
			display: flex;
			justify-content: space-between;
			width: 45%;
			.van-icon {
				font-size: 44rpx !important;
				margin-left: 24rpx;
			}
		}
	}
}
</style>
